<template>
  <FormDesigner ref="formDesignerRef" @save="save" @close="close" :formJson="testJson" :requestHeaders="requestHeaders"
    :uploadApi="uploadApi" :fieldData="fieldData" :config="config" :customWidgetList="customWidgetList">
    <template #heardButtons></template>
  </FormDesigner>
  <!-- <FormRenderer ref="formRendererRef" :formJson="testJson" :requestHeaders="requestHeaders" :uploadApi="uploadApi" :disabled="disabled" />
  <el-button style="margin-left: 15px;" type="primary" @click="getFormData">打印数据</el-button> -->
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import FormDesigner from './components/designer/FormDesigner.vue';
// import FormRenderer from './components/render/FormRenderer.vue';

const formDesignerRef = ref()// 设计器ref
// const formRendererRef = ref() // 渲染器ref

const config = ref({
  showSaveButton: true,// 显示保存按钮
  showCloseButton: true,// 显示关闭按钮
  loadLocalData: true// 设计器挂载时加载本地数据
})

// 请求头
const requestHeaders = ref({
  Authorization: ''
})

// 文件图片上传地址
const uploadApi = ref('/api/upms/file/upload')

// 表单配置数据
const testJson = ref()

// 表单是否禁用
const disabled = ref(false)

//字段数据
const fieldData = ref({
  "fields": [
    { "label": "来访单位", "value": "visit_company" },
    { "label": "来访时间", "value": "visit_time" },
    { "label": "来访事由", "value": "visit_reason" },
    { "label": "备注", "value": "remark" }
  ],
  "children": [
    {
      "label": "接待人明细表",
      "value": "reception_list",
      "fields": [
        { "label": "接待人姓名", "value": "reception_name" },
        { "label": "接待人职位", "value": "reception_position" },
        { "label": "接待人联系方式", "value": "reception_phone" }
      ]
    },
    {
      "label": "来访人员明细",
      "value": "visitor_detail_list",
      "fields": [
        { "label": "人员姓名", "value": "name" },
        { "label": "身份证号", "value": "id_card" },
        { "label": "联系电话", "value": "phone" },
        { "label": "所属单位", "value": "company" }
      ]
    }
  ]
})

const formData = ref({})

// 自定义组件列表
const customWidgetList = ref([{
  type: 'el-color-picker',//组件的名称，需要全局注册（必须）
  label: '颜色选择',//左侧列表对应组件名称（必须）
  id: 'color',//生成id时的前缀（必须）
  isCustomWidget: true,//是否是自定义组件（必须且固定为true）
  isFormItem: true,//是否属于表单组件（必须）
  attributes: {//此处填写的属性会使用v-bind绑定到对应组件上
    hidden: false, //是否隐藏
    label: '颜色选择',//标签名称 (表单组件必须)
    labelWidth: '',//标签宽度 (表单组件必须)
    showLabel: true,// 显示标签 (表单组件必须)
    disabled: false,//是否禁用
    size: 'default',//组件尺寸
    showAlpha: true,//自定义组件的单独属性，需要在attributesConfig下单独配置属性编辑器
  },
  attributesConfig: {//属性的描述，部分属性已内置无需定义
    showAlpha: {
      label: '支持透明度选择',
      component: {//属性所使用的编辑器控件,需全局注册
        name: 'el-switch',//使用el-switch作为属性配置器
        bind: {// 对应配置器的v-bind属性
          activeText: '是',
          inactiveText: '否',
          inlinePrompt: true,
          activeValue: true,
          inactiveValue: false
        }
      }
    }
  },
  rules: [],//验证规则，如果是表单组件则必须且固定为[]
  events: {
    onChange: '',//内容改变
    onMounted: ''//组件创建
  }
},])

// 设计器保存事件
const save = (data) => {
  console.log('保存表单设计器数据', data)
}

// 设计器关闭事件
const close = () => {
  console.log('触发关闭表单设计器事件')
}

const getFormData = async () => {
  const data = await formRendererRef.value.getFormData()
  console.log('表单填写内容', data)
}

onMounted(async () => {
  await nextTick()
  // 异步设置设计器的表单内容
  // formDesignerRef.value.setFormJson(testJson.value)

  // 清空设计器内容
  // formDesignerRef.value.resetFormJson()

  // 异步设置渲染器的表单内容
  // formRendererRef.value.setFormJson(testJson.value)

  // 获取表单填写内容，会检查填写内容是否正确，错误会抛出异常
  // formRendererRef.value.getFormData()

  // 设置渲染器表单数据
  // formRendererRef.value.setFormData(formData.value)
})
</script>

<style scoped></style>